<template>
  <div class="result" v-loading="loading">
    <template v-if="!loading">
      <el-result v-if="payment === 1" icon="success" :title="$t('common.reservationSuccess')" :sub-title="$t('common.reservationTitle')"> </el-result>
      <el-result v-else  icon="error" :title="$t('common.reservationFail')"></el-result>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { checkOrder } from "./pay-result.service"
import { useRoute } from "vue-router"
const route = useRoute()
const { tap_id,checkout_id,order_sn } = route.query
const payment = ref(0)
const loading = ref(false)
const getStatus = () => {
  loading.value = true
  checkOrder({
    pay_on:tap_id || checkout_id,
    order_sn:order_sn
  }).then((res) => {
    payment.value = res.data.payment
    loading.value = false
  })
}
getStatus()
</script>
<style lang="scss">
.result {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: calc(100vh - 494px);
 .el-result__icon svg{
  width: 150px;
  height: 150px;
 }
 .el-result__title p{
  font-size: 24pt;
 }
}
</style>